<template>
  <div>
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <div>
      <el-container style="height: 500px; border: 1px solid #eee">
        <el-header>
          <div class="header_top">
            <el-button @click="addInfo" type="primary" size="medium">添加</el-button>
            <el-divider></el-divider>
          </div>
        </el-header>
        <el-container class="container_box">
          <el-aside width="250px" style="background-color: #fff">
            <departments
              :list="departmentList"
              @getcatatlogue="getcatatlogue"
            ></departments>
          </el-aside>
          <el-main>
            <div class="main_box_title">部门信息</div>
            <el-table :data="departmentChildren">
              <el-table-column prop="deptCode" label="编号" width="80">
              </el-table-column>
              <el-table-column prop="label" label="部门/科室名称" width="220">
              </el-table-column>
              <el-table-column width="80" label="性质">
                <template slot-scope="scope">
                <span v-if="scope.row.property == 1">行政</span>
                <span v-if="scope.row.property == 2">业务</span>
                </template>
              </el-table-column>
              <el-table-column prop="parentName" label="上级部门">
              </el-table-column>
              <el-table-column prop="location" label="位置"> </el-table-column>
              <el-table-column width="60px" label="状态">
                <template slot-scope="scope">
                  {{scope.row.status === 1 ? '启用' : '停用'}}
                </template>
              </el-table-column>
              <el-table-column prop="editTime" label="编辑时间">
              </el-table-column>
              <el-table-column width="200" prop="address" label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click="handleClick(scope.row)"
                    type="primary"
                    size="small"
                    >编辑</el-button
                  >
                  <el-button
                    @click="remove(scope.row)"
                    type="danger"
                    size="small"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="[10, 100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
          </el-main>
        </el-container>
      </el-container>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="1000px"
      class="top_dialog"
    >
      <el-form
        :model="form"
        :rules="rules"
        label-position="left"
        ref="ruleForm"
      >
        <div class="add_info">
          <div class="info_l">
            <div>
              <span>部门信息</span>
              <el-divider></el-divider>
            </div>
            <div>
              <el-form-item label="部门名称" :label-width="formLabelWidth">
                <el-input v-model="form.label" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="部门编码" :label-width="formLabelWidth">
                <el-input
                  v-model="form.deptCode"
                  autocomplete="off"
                  class="info_l_input"
                ></el-input>
              </el-form-item>
              <div class="info_sel">
                <el-form-item label="部门性质" :label-width="formLabelWidth">
                  <el-select
                    v-model="form.property"
                    placeholder="请选择部门性质"
                  >
                    <el-option label="行政" value="1"></el-option>
                    <el-option label="业务" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="上级部门" :label-width="formLabelWidth">
                  <el-select v-model="form.parentId" placeholder="">
                    <el-option v-for="(v,i) in topDeptList" :key="i" :label="v.label" :value="v.id"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <el-form-item label="位置" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="form.location"></el-input>
              </el-form-item>
              <el-form-item label="是否启用">
                <el-checkbox v-model="deptStatus">是否启用</el-checkbox>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editDepart('ruleForm')"
          >保 存</el-button
        >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import crumbs from "../../views/Crumbs.vue";
import departments from "../common/departments.vue";
import {formatTimeToStr} from "@src/common/utils/date";

export default {
  components: {
    crumbs,
    departments,
  },
  data() {
    return {
      navId : 0,
      topDeptList:[],
      status: false,
      propertyOptions: {
        1: "行政",
        2: "业务",
      },
      deptStatus:true,
      parentDepart: [],
      dict: {},
      departmentList: [],
      departmentSelect: {},
      departmentChildren: [],

      formLabelWidth: "80px",
      searchForm: {},
      pageSize: 10,
      pageNo: 1,
      total: 0,

      form: {
        editTime:formatTimeToStr(new Date(), "yyyy-MM-dd hh:mm:ss"),
        status:true
      },
      rules: {
        label: [{ required: true, message: "请输入", trigger: "blur" }],
        deptCode: [{ required: true, message: "请输入", trigger: "blur" }],
        property: [{ required: true, message: "请输入", trigger: "change" }],
        location: [{ required: true, message: "请输入", trigger: "change" }],
      },

      dialogFormVisible: false,
      BreadCrumb: [
        { path: "", name: "基础管理" },
        { path: "/basic/Department", name: "部门科室" },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 通用
      id: null,
      title: "",
    };
  },
  created() {
    this.getDepartmentList();
  },
  methods: {
    // 部门数结构请求
    getDepartmentList() {
      let that = this;
      this.$axios.getDepartTreeList({}).then((res) => {
        if (res.code == "00000") {
          that.departmentList = res.data;
          if(this.navId === 0){
            this.navId = res.data[0].id
          }
          this.doGetList({parentId :this.navId,})
          that.topDeptList = [res.data[0]]
          that.topDeptList = that.topDeptList.concat(res.data[0].children)
        }
      });
    },
    // 每页几条
    handleSizeChange(val) {
      this.pageSize = val;
      this.doGetList({parentId :this.navId, pageSize: this.pageSize, pageNo: this.pageNo})
    },
    // 第几页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.doGetList({parentId :this.navId, pageSize: this.pageSize, pageNo: this.pageNo})
    },

    doGetList(req){
      this.$axios.getListByParentId(req).then(res=>{
        if (res.code == "00000") {
          this.departmentChildren = res.data.records
          this.total = res.data.total
        }
      })
    },

    getcatatlogue(row) {
      this.navId = row.id
      const req = {parentId :row.id}
      this.doGetList(req)
    },
    addInfo() {
      this.title = "添加信息";
      this.dialogFormVisible = true;
      this.id = null;
      this.form = {
        editTime:formatTimeToStr(new Date(), "yyyy-MM-dd hh:mm:ss"),
        status:true,
        parentId:this.navId
      }
    },
    editDepart(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.property = parseInt(this.form.property);
          this.form.status = this.deptStatus ? 1 : 0;
          if (this.id == null) {
            this.$axios.insertDepartment(this.form)
              .then((res) => {
                if (res.code == "00000") {
                  this.$message({
                    type: "success",
                    message: res.msg,
                  });
                  this.dialogFormVisible = false;
                  this.getDepartmentList();
                }
              });
          } else {
            this.$axios.updateDepartment({id: this.id, ...this.form})
              .then((res) => {
                if (res.code == "00000") {
                  this.$message({
                    type: "success",
                    message: res.msg,
                  });
                  this.dialogFormVisible = false;
                  this.getDepartmentList();
                }
              });
          }
        }
      });
    },
    // 编辑
    handleClick(row) {
      this.title = "编辑信息";
      this.dialogFormVisible = true;
      this.$axios
        .getDepartmentById({
          departmentId: row.id,
        })
        .then((res) => {
          if (res.code == "00000") {
            this.id = res.data.id;
            this.form = res.data;
            this.form.property = String(res.data.property);
          }
          console.log(res);
        });
    },
    // 列表删除
    remove(row) {
      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .updateDepartmentStatus({
              departmentId: row.id,
              status: "Inactive",
            })
            .then((res) => {
              console.log(res);
              if (res.code == "00000") {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.departmentList();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
.el-date-editor.el-input {
  /* width: 50%; */
}

.header_top .el-divider--horizontal {
  margin-top: 12px;
}

.el-main {
  padding: 0px;
  padding-left: 20px;
}

.aside_box {
  /* height: 100%; */
  background: #fff;
  padding-top: 10px;
}

.aside_box_title {
  margin: 0px 8px 10px;
  /* text-align: center; */
}

.main_box_title {
  background: #fff;
  padding: 10px;
}

.el-tree {
  padding-bottom: 20px;
}

.container_box {
}

.info_l {
  width: 60%;
  margin: 0px auto;
}

.info_l_input {
  width: 82%;
}

.info_l_button {
  margin-left: 10px;
}

.info_sel_r_group {
  margin-left: 10px;
}
</style>
